<template>
  <CDialog
    class="workshop-dialog"
    title="仪表管理"
    v-model:visible="dialogVisible"
    @confirm="dialogVisible = false"
    confirm-text="关闭"
    :show-cancel-button="false"
    :loading="loading"
    size="large"
  >
    <div class="workshop-dialog-container" v-if="dialogVisible">
      <div class="g-flex-between-center g-mb8">
        <el-button
          type="primary"
          @click="handleAdd"
          v-btnPermission="'TAA_VIEW_EMISSION_MONITORING_ADD_DEVICE'"
          >新增仪表</el-button
        >
        <div id="outside-pagination"></div>
      </div>
      <div class="table-wrapper">
        <CTable
          ref="workshopTableRef"
          :load-data="loadData"
          :border="true"
          :tableFieldsSetting="tableFieldsSetting"
          :extra-table-option="extraTableOption"
          :pagination="{
            teleport: '#outside-pagination',
            layout: 'total, prev, slot, next'
          }"
        >
          <template #meterTypeSlot="{ scope: { row } }: { scope: { row: GetListDeviceResult } }">
            {{ TAAMeterTypeMap[row.meterType] ?? '-' }}
          </template>
          <template #opSlot="{ scope }">
            <el-button
              text
              type="primary"
              @click="handleEdit(scope.row)"
              v-btnPermission="'TAA_VIEW_EMISSION_MONITORING_EDIT_DEVICE'"
              >编辑</el-button
            >
            <el-button
              text
              type="primary"
              @click="handleDelete(scope.row)"
              v-btnPermission="'TAA_VIEW_EMISSION_MONITORING_DELETE_DEVICE'"
              >删除</el-button
            >
          </template>
        </CTable>
      </div>
      <MeterDialog
        v-model:visible="meterDialogVisible"
        :tempRow="tempRow"
        :plantNo="props.plantNo"
        @refresh="handleRefresh"
      />
    </div>
  </CDialog>
</template>

<script lang="ts" setup name="WorkshopDialog">
import { defineProps, withDefaults, defineEmits, computed, ref } from 'vue'
import { CDialog } from '@/components/CDialog'
import { CTable } from '@/components/CTable'
import type { CTableProps } from '@/components/CTable'
import { useMessage } from '@/hooks/useMessage'
import { getListDevice, postDeviceDelete } from '@/apis/system/config/factoryWorkshopMeterSet'
import type { GetListDeviceResult } from '@/apis/system/config/model/factoryWorkshopMeterSetModel'
import type { BasicPagingListParams } from '@/apis/basicModel'
import MeterDialog from './components/MeterDialog/index.vue'
import { TAAMeterTypeMap } from '@/constants/enum'

interface WorkshopDialogProps {
  visible: boolean
  plantNo: string
}
interface WorkshopDialogEmits {
  (e: 'update:visible', visible: boolean): void
}
const props = withDefaults(defineProps<WorkshopDialogProps>(), {})
const emits = defineEmits<WorkshopDialogEmits>()
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible
  },
  set: (val) => {
    emits('update:visible', val)
  }
})
const loading = ref(false)
const { createMessage, createConfirm } = useMessage()

/**
 * 加载列表
 */
const workshopTableRef = ref()
function loadData(params: BasicPagingListParams) {
  return getListDevice({ ...params, plantNo: props.plantNo })
}
function handleRefresh() {
  workshopTableRef.value?.refresh()
}
const tableFieldsSetting: CTableProps['tableFieldsSetting'] = [
  {
    title: '仪表id',
    field: 'meterId',
    minWidth: '150'
  },
  {
    title: '仪表名称',
    field: 'meterName',
    minWidth: '150'
  },
  {
    title: '仪表类型',
    field: 'meterType',
    slot: 'meterTypeSlot',
    minWidth: '80'
  },
  {
    title: '车间',
    field: 'department',
    minWidth: '100'
  },
  {
    title: '单位',
    field: 'dataUnit',
    minWidth: '100'
  },
  {
    key: 'op',
    title: '操作',
    field: 'op',
    slot: 'opSlot',
    width: '135',
    align: 'center'
  }
]

const extraTableOption = {
  height: 'auto'
}

/**
 * 新增、编辑仪表
 */
const meterDialogVisible = ref(false)
const tempRow = ref<GetListDeviceResult>()
function handleAdd() {
  tempRow.value = undefined
  meterDialogVisible.value = true
}
function handleEdit(row: GetListDeviceResult) {
  tempRow.value = row
  meterDialogVisible.value = true
}

/**
 * 删除仪表
 * @param row
 */
function handleDelete(row: GetListDeviceResult) {
  console.log('handleDelete', row)
  createConfirm('提示', '删除后不可恢复，是否继续？', {
    iconType: 'warning'
  }).then(async () => {
    loading.value = true
    try {
      await postDeviceDelete(row.deviceNo)
      createMessage.success('删除仪表成功！')
      handleRefresh()
      loading.value = false
    } catch (error) {
      console.log('error', error)
      loading.value = false
    }
  })
}
</script>

<style lang="scss" scoped>
.table-wrapper {
  // 40 dialog上下
  // 64 dialog头
  // 68 dialog尾
  // 40 新增按钮行
  // 48 补偿
  height: calc(100vh - 40px - 64px - 68px - 40px - 48px);
}
</style>
